<template>
	<view class="container" :style="containHeight">
		<view class="layout-center search_item">
			<str-autocomplete :importvalue="importString" :list="autoList" :label="labelName" @select="selectOne"
				@change="textChange" highlightColor="#FF0000" class="select-border-has"></str-autocomplete>
			<view class="search_txt" @click="toSearch">搜索</view>
		</view>
		<view class="search_results">
			<view class="result_item" v-for="(item,index) in resultList" :key="index" v-if="resultList.length != 0">
				<view class="result_txt">
					<text class="tType" v-html="item.topicType"></text>
					<text class="topic" v-html="item.searchResults"></text>
				</view>
				<view class="source" v-html="item.source"></view>
			</view>
			<view v-if="resultList.length==0">
				<u-empty mode="search" icon="http://cdn.uviewui.com/uview/empty/search.png"></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				importString: '',
				autoList: [],
				labelName: 'objLabel', //需要匹配的字段,默认为label
				searchParams: {
					sName: null,
				},
				fullHeight: true,
				resultList: [{
					searchResults: '从业人员有依法获得劳动安全生产保障的权从业人员有依法获得劳动障的权从业人员有依法获得劳动安全生产保障的权从业人员有依法获得劳动安全生产保障的权',
					topicType: '单选题',
					source: '来源：XXXX'
				}, {
					searchResults: '从业人员有依法获得劳动安全生产保障的权',
					topicType: '单选题',
					source: '来源：XXXX'
				}, {
					searchResults: '从业人员有依法获得劳动安全生产保障的权',
					topicType: '单选题',
					source: '来源：XXXX'
				}],
				sList: [],
			}
		},
		computed: {
			containHeight() {
				return this.fullHeight ? {
					height: 'calc(100vh - 44px - 50px)'
				} : {
					height: '100%'
				}
			},
		},
		onReachBottom() {
			if (this.fullHeight) {
				this.fullHeight = false
				console.log("onReachbottom");
			}
		},
		methods: {
			//模糊查询员工姓名
			selectOne(opt) {
				console.log('selectOne', opt);
				//弹框获取接口的值
				this.searchParams.sName = opt
			},
			textChange(opt) {
				this.importString = opt
				console.log('textchange:' + opt);
				//未弹框获取接口的值，输入的值
				this.searchParams.sName = opt
				if (opt == '') {
					//防止空值请求一次接口
				} else {
					this.autoList = []
					// getWorkName({
					// 	personName: opt
					// }).then(s => {
					// 	if (s.code === 20000) {
					// 		this.autoList=s.data
					// 		// s.data.forEach(res => {
					// 		// 	console.log("res",res,Object.keys(res),Object.values(res)[0]);
					// 		// 	// this.autoList.push(res.value)
					// 		// 	this.autoList.push(Object.values(res)[0])
					// 		// })
					// 	}
					// })
				}
				console.log("this.autoList", this.autoList);
			},
			toSearch() {
				//每次搜索前清空
				this.sList = []
				this.sList = this.resultList
				this.changeColor(this.sList)
				console.log("toSearch", this.sList);
				// this.paramsValue.page = 1
				// this.btnSearch = true
				// this.onlyReachBottom=false
				// //处理参数向后端查询数据
				// this.paramsValue.personName = this.searchParams.personName
				// this.paramsValue.employeeId = this.searchParams.employeeId
				// this.paramsValue.detectRes = this.searchParams.detectRes			
				// //过滤空的参数
				// const params = Object.keys(this.paramsValue).filter((key) => this.paramsValue[key] !== null && this
				// 	.paramsValue[key] !== '' && this.paramsValue[key] !== undefined).reduce((acc, key) => ({
				// 	...acc,
				// 	[key]: this.paramsValue[key]
				// }), {})
				// console.log("const params", params);
				// this.peopleArray = []
				// searchWorkRecord(
				// 	params
				// ).then(s => {
				// 	console.log("查询s", s);
				// 	if (s.code === 20000) {
				// 		//搜索结果反映到视图
				// 		this.btnSearch = false
				// 		this.peopleArray = s.data.data
				// 		this.nextQuery = true
				// 		// this.searchList = this.searchList.concat(s.data.data)
				// 		//查询结果的页数,向上取整
				// 		let searchPageNum = Math.ceil(s.data.total / this.pageParams.pageSize)
				// 		this.page = 1
				// 		if (searchPageNum > this.page) {
				// 			//调查询接口，页码加1							
				// 			this.statusLoading = 'loading'
				// 			console.log("还有下一页");
				// 		} else {
				// 			this.statusLoading = 'nomore'
				// 			console.log("只有当前页");
				// 		}

				// 	} else {
				// 		uni.showToast({
				// 			title: s.message,
				// 			icon: 'none'
				// 		})
				// 	}
				// })
			},
			//搜索关键词高亮方法
			changeColor(result) {
				//result为接口返回的数据
				console.log("result", result);
				result.map((item, index) => {
					console.log("this.importString", this.importString);
					if (this.importString) {
						console.log("this.importString if");
						let replaceReg = new RegExp(this.importString, "ig")
						let replaceString = `<span style = "color: red"> ${this.importString} </span>`;
						result[index].searchResults = item.searchResults.replace(replaceReg, replaceString);
						result[index].topicType = item.topicType.replace(replaceReg, replaceString);

					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background: url("../../static/bg.png");
		background-size: cover;
		padding: 20rpx 30rpx;
		width: 100%;
		position: relative;
		box-sizing: border-box;
	}

	.search_item {
		width: 100%;
		position: relative;
		margin-top: 20rpx;

		.select-border-has {
			width: 80%;
			height: 38px;
			line-height: 38px;
			border: 1px solid #dadbde;
			border-bottom-left-radius: 20rpx;
			border-top-left-radius: 20rpx;
			// color: #B1B1B1;
			box-sizing: border-box;
			padding: 0rpx 25rpx;
			font-size: 16px;
			// z-index: 9;
			position: relative;
			display: flex;
			align-items: center;
			background: #fff;
		}

		.search_txt {
			background: #4662D9;
			color: #fff;
			height: 38px;
			line-height: 38px;
			border: 1px solid #4662D9;
			box-sizing: border-box;
			padding: 0rpx 25rpx;
			font-size: 16px;
			border-bottom-right-radius: 20rpx;
			border-top-right-radius: 20rpx;
		}
	}

	.search_results {
		border-bottom: 1px solid #F3F3F3;
		background: #fff;
		margin-top: 30rpx;
		padding: 1rpx 20rpx 30rpx;
		width: 100%;
		position: relative;
		box-sizing: border-box;
		border-radius: 20rpx;

		.result_item {
			border-radius: 20rpx;
			box-shadow: 4px 4px 10px #888888;
			padding: 20rpx;
			width: 100%;
			position: relative;
			box-sizing: border-box;
			margin-top: 30rpx;

			.result_txt {
				width: 100%;
				position: relative;
				// white-space: nowrap;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				overflow: hidden;
				.tType {
					color: #45B4F2;
					padding-right: 10rpx;
					box-sizing: border-box;
				}

				.topic {
					// display: -webkit-box;
					// -webkit-box-orient: vertical;
					// -webkit-line-clamp: 2;
					// overflow: hidden;
					// width: 90%;
					color: #333333;
					
					// white-space: nowrap;
					// text-overflow: ellipsis;
					
				}
			}

			.source {
				color: #D4D1D1;
				margin-top: 10rpx;
			}
		}
	}
</style>